<template>
  <div class="container mainTablePage">
    <el-card class="box-card mainPage">
      <div class="setHeadFlex">
        <div>
          <div>
            <form-list :formConfig="formConfig" @searchMethodParent="searchMethodParent" />
          </div>
        </div>
       
      </div>
      <div ref="suixinzhu" :style="{ height: height + 'px' }" class="showTable">
        <vxe-grid v-bind="gridOptions" :data="tableData" >
          <template #doneZ="{ row }">
            <div @click="() => updateOrAdd(row)" style=" color:#1890ff;cursor: pointer; ">
               报价
            </div>
          </template>
          <template #pager>
            <!--使用 pager 插槽-->
            <vxe-pager :layouts="['PrevPage', 'Number', 'NextPage', 'FullJump']" v-model:current-page="searchObj.pageIndex"
              v-model:page-size="searchObj.pageSize" :total="searchObj.total" @page-change="handlePageChange">
              <template #left>
                <div style="margin-top: 1px;display:flex">
                  <div>
                    共 {{ searchObj.total }} 条
                  </div>
                  <div class="setCount">
                    <vxe-input @blur="() => { searchObj.pageIndex = 1; getList() }" style="width: 50px;" type="number"
                      v-model="searchObj.pageSize" size="mini"></vxe-input>
                  </div>
                </div>
              </template>
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
      <div v-if="isAddModal">
        <AddUpdate  :editData="editData" :title="editData.id ? '编辑' : '新增'"
          @updateMethod="updateMethod" />
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, computed, h, toRefs } from "vue";
import FormList from '/@/components/commonSearch.vue'
import AddUpdate from './editData.vue';
import {quoteList} from '/@/api/zhu.js'
import { ElCheckbox, ElMessage } from "element-plus";

/**
 * @desc 设置响应式数据放这一块
 */

/**
 * @desc 通过ref获取到表格距离上方高度 进而设置
 */
let suixinzhu = ref(null);

/**
 * @desc 表格动态高度计算
 */
let height = ref();
/**
 * @desc 表格展示列表数据
 */
let tableData = ref([]);

/**
 * @desc 表格是否在loading
 */
let loading = ref(false)
/**
 * @desc 表格选中行
 */
let selectionData = ref([])

/**
 * @desc 查询条件响应式
 */
let searchObj = reactive({ pageIndex: 1, pageSize: 30, total: 100 })


/**
 * @desc 是否打开新增编辑的弹框
 */
let isAddModal = ref(false)
/**
 * @desc 新 编辑弹框展示的数据 
 */
let editData = reactive({});

/**
 * @desc 设置表格响应式配置
 */
let gridOptions = reactive({
  border: true,
  loading: loading,
  filterConfig: {
    showIcon: false
  },
  columnConfig: {
    resizable: true
  },
  showOverflow: "tooltip",
  showHeaderOverflow: "tooltip",
  showFooterOverflow: "tooltip",

  round: true,
  height: '100%',
  // 展示自定义内容 两种方式 一种写在slots配置  一种写在dom层 
  columns: [
   
    {
      field: 'billNo', title: '询价单号'
    },
    {
      field: 'materialNo', title: '物料编号'
    },
    {
      field: 'materialName', title: '物料名称',
    },
    { field: 'qty', title: '询价数量', },
    { field: 'unit', title: '询价单位', },
    { field: 'billDate', title: '询价日期', },
    {
      field: 'done',title: '操作' ,
        slots: {
          default: 'doneZ'
        }
  
    },
  ],
})

/**
 * @desc 属性计算上面的查询条件配置
 */
const formConfig = computed(() => {
  let arr = [
    {
      label: "物料",
      key: "materialNo",
      type: 'input',
      
    },
  ]
  return {
    inline: true,
    size: "mini",
    labelWidth: '80px',
    formItemList: arr,
  };
})
/**
 * @desc 计算出表格距离上面高度  动态适配表格
 */
onMounted(() => {
  setTimeout(() => {
    let { top = 0 } = suixinzhu.value.getBoundingClientRect();
    height.value = window.innerHeight - top - 20;
  }, 600);
})



/**
 * @desc 获取数据列表
 */
const getList = () => {
  let params = { ...searchObj };
  loading.value = true;

  quoteList(params).then(res=>{
    let {records=[],total}=res.data.data;
    tableData.value = records;
    loading.value = false;
    searchObj.total=total;

  })
  
}

/**
 * @desc 翻页器操作翻页 
 */
const handlePageChange = (e) => {
  let { currentPage, pageSize } = e;
  searchObj = { ...searchObj, pageIndex: currentPage, pageSize };
  getList()
}

/**
 * @desc 查询条件触发操作
 */
const searchMethodParent = (e) => {

  searchObj = { ...searchObj, ...e, pageIndex: 1 };
  getList()
}

/**
 * @desc 新增或者编辑
 */

const updateMethod = (e, isSubmit = false) => {
  isAddModal.value = false;
  if (isSubmit) {
    ElMessage.success('操作成功')
    searchObj.pageIndex = 1;
    getList()
  }

}

/**
 * @desc 打开弹框 赋值数据
 */
const updateOrAdd = (e) => {
  editData = e;
  isAddModal.value = true
}
</script>


<style scoped lang="less" >
.zhugaox {
  padding: 24px;
}

/deep/ .vxe-table--body-wrapper table th {
  background-color: #f8f8f9 !important;
}
</style>
  
<!-- 复选框选中 操作新增和删除 编辑  -->